<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑个人资料 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .form-group {
      margin-bottom: 16px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: var(--text-sub);
    }
    
    .form-input {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
    }
    
    .form-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .form-select {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      background-color: white;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }
    
    .form-select:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .avatar-upload {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #f3f4f6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      margin: 0 auto 20px;
    }
    
    .avatar-upload img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .avatar-upload .upload-icon {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 4px 0;
      font-size: 12px;
      text-align: center;
    }
    
    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid var(--border);
    }
    
    .menu-item:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="javascript:history.back()" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">编辑个人资料</h1>
      <button id="saveBtn" class="text-sm primary-color">保存</button>
    </div>
    
    <!-- 头像上传 -->
    <div class="p-4 text-center">
      <label for="avatarUpload" class="avatar-upload cursor-pointer">
        <img src="https://via.placeholder.com/100" alt="用户头像" id="avatarPreview">
        <div class="upload-icon">
          <i class="fas fa-camera mr-1"></i>更换头像
        </div>
        <input type="file" id="avatarUpload" accept="image/*" class="hidden">
      </label>
    </div>
    
    <!-- 基本信息 -->
    <div class="p-4">
      <div class="form-group">
        <label class="form-label">昵称</label>
        <input type="text" class="form-input" id="nickname" value="张三" placeholder="请输入昵称">
      </div>
      
      <div class="form-group">
        <label class="form-label">性别</label>
        <div class="flex space-x-4">
          <label class="flex items-center">
            <input type="radio" name="gender" value="male" checked class="mr-2">
            <span>男</span>
          </label>
          <label class="flex items-center">
            <input type="radio" name="gender" value="female" class="mr-2">
            <span>女</span>
          </label>
          <label class="flex items-center">
            <input type="radio" name="gender" value="other" class="mr-2">
            <span>不显示</span>
          </label>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">出生日期</label>
        <input type="date" class="form-input" id="birthday" value="1980-01-01">
      </div>
      
      <div class="form-group">
        <label class="form-label">手机号码</label>
        <div class="flex">
          <input type="tel" class="form-input" id="phone" value="138****6789" disabled>
          <a href="bind_phone.html" class="ml-2 btn-outline px-3 py-2 rounded-lg flex items-center text-sm">更换</a>
        </div>
      </div>
    </div>
    
    <!-- 其他信息 -->
    <div class="mt-2">
      <div class="bg-white">
        <a href="id_verification.html" class="menu-item">
          <span>实名认证</span>
          <div class="flex items-center">
            <span class="text-sm text-green-500 mr-2">已认证</span>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
        </a>
        <a href="emergency_contact.html" class="menu-item">
          <span>紧急联系人</span>
          <div class="flex items-center">
            <span class="text-sm text-gray-500 mr-2">已设置</span>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
        </a>
        <a href="health_info.html" class="menu-item">
          <span>健康信息</span>
          <div class="flex items-center">
            <span class="text-sm text-gray-500 mr-2">完善健康档案</span>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
        </a>
      </div>
    </div>
    
    <!-- 保存成功提示 -->
    <div id="saveSuccess" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-4 flex items-center">
        <i class="fas fa-check-circle text-green-500 mr-2"></i>
        <span>保存成功</span>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 头像上传预览
      const avatarUpload = document.getElementById('avatarUpload');
      const avatarPreview = document.getElementById('avatarPreview');
      
      avatarUpload.addEventListener('change', function() {
        if (this.files && this.files[0]) {
          const reader = new FileReader();
          reader.onload = function(e) {
            avatarPreview.src = e.target.result;
          };
          reader.readAsDataURL(this.files[0]);
        }
      });
      
      // 保存按钮
      const saveBtn = document.getElementById('saveBtn');
      const saveSuccess = document.getElementById('saveSuccess');
      
      saveBtn.addEventListener('click', function() {
        // 收集表单数据
        const nickname = document.getElementById('nickname').value;
        const gender = document.querySelector('input[name="gender"]:checked').value;
        const birthday = document.getElementById('birthday').value;
        
        // 验证表单
        if (!nickname) {
          alert('请输入昵称');
          return;
        }
        
        // 这里可以添加AJAX请求来保存数据
        console.log('保存的个人资料:', {
          nickname,
          gender,
          birthday
        });
        
        // 显示保存成功提示
        saveSuccess.classList.remove('hidden');
        saveSuccess.classList.add('flex');
        
        // 2秒后自动关闭提示
        setTimeout(() => {
          saveSuccess.classList.add('hidden');
          saveSuccess.classList.remove('flex');
          
          // 返回上一页
          window.history.back();
        }, 1500);
      });
    });
  </script>
</body>
</html> 